<template>
	<view class="container">
		<view class="wrap">
			<view class="list" v-for="(item,index) in data" :key="index">
				<text class="round">{{item.addressName.charAt(0)}}</text>
				<view class="main">
					<text class="name">{{item.addressName}}</text>
					<text class="phone">{{item.addressPhone}}</text>
					<view class="address">{{item.addressLocation}}</view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="button" @click="addAdress">+ 添加收货地址</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: null,
				data: [],
				token: ''
			}
		},
		onLoad() {

			var _this = this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.statusBarHeight = data.statusBarHeight;
				}
			})

		},
		onShow() {
			var bs = uni.getStorageSync('UserInformation')
			this.token = bs.usertoken
			this.getData()
		},
		methods: {
			// /mall/customer / address / selectAddress
			getData() {
				this.requestfs({
					url: '/mall/customer/address/selectAddress',
					Authorization: this.token,
				}).then(res => {
					this.data = res.data.data
				})
			},
			addAdress() {
				uni.navigateTo({
					url: '/pages-me/addAdress/addAdress'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		height: auto;
		min-height: 100vh;
		background: #f3f5f7;

		.bottom {
			width: 100%;
			background-color: #ffffff;
			text-align: center;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.button {
				width: 90%;
				margin: 0 auto;
				background-image: linear-gradient(to right, rgba(237, 127, 48, 0.7), rgba(236, 96, 45, 1));
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
				color: #ffffff;
				border-radius: 50rpx;
			}
		}

		.wrap {
			width: 710rpx;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 20rpx;

			.list {
				display: flex;
				margin-bottom: 32rpx;

				.main {
					width: 80%;

					.name {
						font-weight: bold;
						line-height: 70rpx;
					}

					.phone {
						font-size: 24rpx;
						color: #9b9b9b;
						line-height: 70rpx;
						margin-left: 15rpx;
					}

					.address {
						font-size: 26rpx;
						line-height: 40rpx;
					}
				}

				.round {
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border-radius: 50%;
					background: #fae1d7;
					color: #ea5a2c;
					margin: 30rpx 20rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
